﻿@model IEnumerable<WriterStars.Models.ViewModels.ContestViewModel>
@{
    var contest = new WriterStars.Model.Contest();
}
<link href="~/Content/jquery-ui/datepicker/jquery-ui.datepicker.min.css" rel="stylesheet" />
<section>
    <div class="col-xs-12 col-sm-4 pull-right">
        <h5>Create new Contest</h5>
        @using (Ajax.BeginForm("Contest", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "contests-container" }))
        {
            <div class="form-group">
                @Html.ValidationMessageFor(x => contest.Name)
                @Html.TextBoxFor(x => contest.Name, new { @class = "form-control", @placeholder = "Name" })
            </div>

            <div class="form-group">
                @Html.ValidationMessageFor(x => contest.Regulations)
                @Html.TextAreaFor(x => contest.Regulations, new { @class = "form-control", @placeholder = "Regulations", @rows = "10" })
            </div>
            <div class="form-group">
                @Html.ValidationMessageFor(x => contest.StartDate)
                @Html.TextBoxFor(x => contest.StartDate, new { @id = "startdate", @class = "form-control", @placeholder = "Start date", @Value = "", @readonly = "readonly" })
            </div>

            <div class="form-group">
                @Html.ValidationMessageFor(x => contest.EndDate)
                @Html.TextBoxFor(x => contest.EndDate, new { @id = "enddate", @class = "form-control", @placeholder = "End date", @Value = "", @readonly = "readonly" })
            </div>

            <input type="submit" value="Create" />
        }
    </div>
    <div class="col-xs-12 col-sm-8 pull-right">
        <h5 class="col-xs-12">All contests</h5>
        <div id="contests-container">
            @Html.EditorFor(x => x)
        </div>
    </div>
</section>
<style>
    .box-container .box-header {
        height: 25px;
        color: white;
        font-weight: bold;
        line-height: 25px;
        font-size: 16px;
        padding: 0 10px;
        border-radius: 3px 3px 0 0;
    }

    .box-container .box-text {
        padding: 0 10px;
        background-color: ghostwhite;
        margin: 0;
    }

    .box-container footer {
        text-align: left;
        font-weight: normal;
        font-size: 12px;
        background-color: #A6A7A8;
        color: white;
        border-radius: 0 0 3px 3px;
        /*margin: 0 -10px;*/
        padding: 0 10px;
        text-shadow: 0 0 0 transparent, 1px 1px 0px #656565;
        height: 27px;
        line-height: 27px;
        background-image: -webkit-linear-gradient(top, #bcbec0 0%, #979797 100%);
    }



    textarea {
        resize: none;
    }

    #startdate, #enddate {
        cursor: pointer;
    }

    .form-control[readonly] {
        background-color: white;
        border: 1px solid #bdc3c7;
        color: black;
        opacity: initial;
    }
</style>
@section scripts{
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="~/Scripts/jquery-ui/datepicker/jquery-ui.datepicker.js"></script>
    <script>
        $(function () {
            $("#startdate").datepicker({
                minDate: 0,
                onClose: function (date) {
                    if (date == '' || date == undefined || date == null) {
                        date = new Date();
                        date.setDate(date.getDate() + 1);
                    }

                    $("#enddate").datepicker("option", "minDate", new Date(date));
                }
            });

            $("#enddate").datepicker({
                minDate: 1
            });

            $('#enddate, #startdate').focus(function (e) {
                e.preventDefault();
            })
        });
    </script>
}